<template>
  <div class="newsbox">
    <div class="news" v-for="item in news" :key="item.id">
      <div class="imgbox" v-if="item.havePic">
        <a :href="item.link" target="blank">
          <img :src="item.img ? item.img : item.imageurls[0].url" />
        </a>
      </div>
      <div class="textbox">
        <a :href="item.link" target="blank" class="title">
          <h2>{{item.title}}</h2>
        </a>
        <div class="about">
          <span class="channels">{{item.channelName}}</span>
          <span class="from">来源：{{item.source}}</span>
          <span class="date">发布日期：{{item.pubDate}}</span>
        </div>
        <div class="content">{{item.content}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    news: {
      type: Array,
      default: []
    }
  }
};
</script>

<style lang="less" scoped>
.news {
  width: 1000px;
  padding: 20px 15px;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
  display: flex;
  box-sizing: border-box;
  .imgbox {
    width: 180px;
    height: 180px;
    border: 1px solid #ccc;
    border-radius: 5px;
    a {
      display: block;
      width: 160px;
      height: 160px;
      margin: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .textbox {
    margin-left: 10px;
    padding-top: 6px;
    & > * {
      margin-bottom: 5px;
    }
    .title {
      color: #409eff;
      display: block;
      h2 {
        font-weight: 400;
      }
    }
    .about {
      color: #888888;
      font-size: 14px;
      & > * {
        margin-right: 15px;
      }
    }
    .content {
      color: #333333;
      font-size: 17px;
      line-height: 27px;
      max-height: 105px;
      overflow: hidden;
    }
  }
}
</style>